<template>
    <a-modal :open="UserNameModal" title="" @ok="handleUserNameOk" @cancel="onClose" :footer="null"
             :closable="false"
             :width="400"
             :body-style="bodyStyleModal">
        <a-input v-model:value="userName" class="inputUserCode" placeholder="请输入要修改的用户名"></a-input>
        <a-divider style="margin: 5px 0;background-color: black"></a-divider>
        <div class="buttonDiv">
            <a-button shape="round" class="confirmBtn" @click="handleUserNameOk">确定</a-button>
        </div>
    </a-modal>
    <a-drawer
            :width="400"
            :height="280"
            title=""
            :open="UserNameModal"
            placement="bottom"
            :mask="false"
            :closable="false"
            :mask-closable="true"
            @close="onClose"
            :body-style="body"
            style="opacity: 10"
    >
        <!--            第一行-->
        <a-row style="gap:6px;justify-content: center">
            <a-button title="`" ref="aa" class="button1" :style="bgColor.point1" @click="keyPress('`','point1')">`
            </a-button>
            <a-button class="button1" :style="bgColor.exclamationSign" @click="keyPress('!','exclamationSign')">!
            </a-button>
            <a-button class="button1" :style="bgColor.numberSign" @click="keyPress('#','numberSign')">#</a-button>
            <a-button class="button1" :style="bgColor.dollarSign" @click="keyPress('$','dollarSign')">$</a-button>
            <a-button class="button1" :style="bgColor.percentSign" @click="keyPress('%','percentSign')">%</a-button>
            <a-button class="button1" :style="bgColor.exponentSign" @click="keyPress('^','exponentSign')">^</a-button>
            <a-button class="button1" :style="bgColor.and" @click="keyPress('&','and')">&</a-button>
            <a-button class="button1" :style="bgColor.starSign" @click="keyPress('*','starSign')">*</a-button>
            <a-button class="button1" :style="bgColor.leftBracket" @click="keyPress('(','leftBracket')">(</a-button>
            <a-button class="button1" :style="bgColor.rightBracket" @click="keyPress(')','rightBracket')">)</a-button>
            <a-button class="button1" :style="bgColor.slash" @click="keyPress('/','slash')">/</a-button>
            <a-button class="button1" :style="bgColor.underline" @click="keyPress('_','underline')">_</a-button>
            <a-button class="button1" :style="bgColor.minus" @click="keyPress('-','minus')">-</a-button>
            <a-button class="button1" :style="bgColor.equals" @click="keyPress('=','equals')">=</a-button>
<!--            <a-button class="button1" style="text-align: center;padding: 2px 6px;background-color: #4db0e7">符号-->
<!--            </a-button>-->
        </a-row>
        <!--            第二行-->
        <a-row style="gap:6px;justify-content: center;margin-top: 6px" v-show="capsLock">
            <a-button class="button" :style="bgColor.Q" @click="keyPress('Q','Q')">Q</a-button>
            <a-button class="button" :style="bgColor.W" @click="keyPress('W','W')">W</a-button>
            <a-button class="button" :style="bgColor.E" @click="keyPress('E','E')">E</a-button>
            <a-button class="button" :style="bgColor.R" @click="keyPress('R','R')">R</a-button>
            <a-button class="button" :style="bgColor.T" @click="keyPress('T','T')">T</a-button>
            <a-button class="button" :style="bgColor.Y" @click="keyPress('Y','Y')">Y</a-button>
            <a-button class="button" :style="bgColor.U" @click="keyPress('U','U')">U</a-button>
            <a-button class="button" :style="bgColor.I" @click="keyPress('I','I')">I</a-button>
            <a-button class="button" :style="bgColor.O" @click="keyPress('O','O')">O</a-button>
            <a-button class="button" :style="bgColor.P" @click="keyPress('P','P')">P</a-button>
            <!--                                        退       格                                                          -->
            <a-button class="button" style="background-color: #4db0e7" @click="backSpace"><img
                    src="../assets/image/backSpace.png"
                    alt=""></a-button>
            <a-button class="button" :style="bgColor.one" @click="keyPress('1','1')">1</a-button>
            <a-button class="button" :style="bgColor.two" @click="keyPress('2','2')">2</a-button>
            <a-button class="button" :style="bgColor.three" @click="keyPress('3','3')">3</a-button>
            <!--                                        收       起                                                          -->
            <a-button class="button"><img src="../assets/image/packUpKey.png" alt="" @click="onClose"></a-button>
        </a-row>
        <a-row style="gap:6px;justify-content: center;margin-top: 6px" v-show="!capsLock">
            <a-button class="button" :style="bgColor.q" @click="keyPress('q','q')">q</a-button>
            <a-button class="button" :style="bgColor.w" @click="keyPress('w','w')">w</a-button>
            <a-button class="button" :style="bgColor.e" @click="keyPress('e','e')">e</a-button>
            <a-button class="button" :style="bgColor.r" @click="keyPress('r','r')">r</a-button>
            <a-button class="button" :style="bgColor.t" @click="keyPress('t','t')">t</a-button>
            <a-button class="button" :style="bgColor.y" @click="keyPress('y','y')">y</a-button>
            <a-button class="button" :style="bgColor.u" @click="keyPress('u','u')">u</a-button>
            <a-button class="button" :style="bgColor.i" @click="keyPress('i','i')">i</a-button>
            <a-button class="button" :style="bgColor.o" @click="keyPress('o','o')">o</a-button>
            <a-button class="button" :style="bgColor.p" @click="keyPress('p','p')">p</a-button>
            <!--                                        退       格                                                          -->
            <a-button class="button" style="background-color: #4db0e7" @click="backSpace"><img
                    src="../assets/image/backSpace.png"
                    alt=""></a-button>
            <a-button class="button" :style="bgColor.one" @click="keyPress('1','one')">1</a-button>
            <a-button class="button" :style="bgColor.two" @click="keyPress('2','two')">2</a-button>
            <a-button class="button" :style="bgColor.three" @click="keyPress('3','three')">3</a-button>
            <!--                                        收       起                                                          -->
            <a-button class="button"><img src="../assets/image/packUpKey.png" alt="" @click="onClose"></a-button>
        </a-row>
        <!--            第三行-->
        <a-row style="gap:6px;justify-content: center;margin-top: 6px" v-show="capsLock">
            <a-button class="button" :style="bgColor.A" @click="keyPress('A','A')">A</a-button>
            <a-button class="button" :style="bgColor.S" @click="keyPress('S','S')">S</a-button>
            <a-button class="button" :style="bgColor.D" @click="keyPress('D','D')">D</a-button>
            <a-button class="button" :style="bgColor.F" @click="keyPress('F','F')">F</a-button>
            <a-button class="button" :style="bgColor.G" @click="keyPress('G','G')">G</a-button>
            <a-button class="button" :style="bgColor.H" @click="keyPress('H','H')">H</a-button>
            <a-button class="button" :style="bgColor.J" @click="keyPress('J','J')">J</a-button>
            <a-button class="button" :style="bgColor.K" @click="keyPress('K','K')">K</a-button>
            <a-button class="button" :style="bgColor.L" @click="keyPress('L','L')">L</a-button>
            <a-button class="button" :style="bgColor.at" @click="keyPress('@','@')">@</a-button>
            <!--                                        大       写                                                          -->
            <a-button class="button" :style="capsLock?'background-color: #4db0e7':''" @click="capsLock=!capsLock"><img
                    src="../assets/image/capsLock.png" alt=""></a-button>
            <a-button class="button" :style="bgColor.four" @click="keyPress('4','four')">4</a-button>
            <a-button class="button" :style="bgColor.five" @click="keyPress('5','five')">5</a-button>
            <a-button class="button" :style="bgColor.six" @click="keyPress('6','six')">6</a-button>
            <a-button class="button" :style="bgColor.zero" @click="keyPress('0','zero')">0</a-button>
        </a-row>
        <a-row style="gap:6px;justify-content: center;margin-top: 6px" v-show="!capsLock">
            <a-button class="button" :style="bgColor.a" @click="keyPress('a','a')">a</a-button>
            <a-button class="button" :style="bgColor.s" @click="keyPress('s','s')">s</a-button>
            <a-button class="button" :style="bgColor.d" @click="keyPress('d','d')">d</a-button>
            <a-button class="button" :style="bgColor.f" @click="keyPress('f','f')">f</a-button>
            <a-button class="button" :style="bgColor.g" @click="keyPress('g','g')">g</a-button>
            <a-button class="button" :style="bgColor.h" @click="keyPress('h','h')">h</a-button>
            <a-button class="button" :style="bgColor.j" @click="keyPress('j','j')">j</a-button>
            <a-button class="button" :style="bgColor.k" @click="keyPress('k','k')">k</a-button>
            <a-button class="button" :style="bgColor.l" @click="keyPress('l','l')">l</a-button>
            <a-button class="button" :style="bgColor.at" @click="keyPress('@','at')">@</a-button>
            <!--                                        大       写                                                          -->
            <a-button class="button" :style="capsLock?'background-color: #4db0e7':''" @click="capsLock=!capsLock"><img
                    src="../assets/image/capsLock.png" alt=""></a-button>
            <a-button class="button" :style="bgColor.four" @click="keyPress('4','four')">4</a-button>
            <a-button class="button" :style="bgColor.five" @click="keyPress('5','five')">5</a-button>
            <a-button class="button" :style="bgColor.six" @click="keyPress('6','six')">6</a-button>
            <a-button class="button" :style="bgColor.zero" @click="keyPress('0','zero')">0</a-button>
        </a-row>
        <!--            第四行-->
        <a-row style="gap:6px;justify-content: center;margin-top: 6px" v-show="capsLock">
            <a-button class="button" :style="bgColor.Z" @click="keyPress('Z','Z')">Z</a-button>
            <a-button class="button" :style="bgColor.X" @click="keyPress('X','X')">X</a-button>
            <a-button class="button" :style="bgColor.C" @click="keyPress('C','C')">C</a-button>
            <a-button class="button" style="width: 124px">
                <img src="../assets/image/space.png" alt="">
            </a-button>
            <a-button class="button" :style="bgColor.V" @click="keyPress('V','V')">V</a-button>
            <a-button class="button" :style="bgColor.B" @click="keyPress('B','B')">B</a-button>
            <a-button class="button" :style="bgColor.N" @click="keyPress('N','N')">N</a-button>
            <a-button class="button" :style="bgColor.M" @click="keyPress('M','M')">M</a-button>
            <a-button class="button" :style="bgColor.comma" @click="keyPress(',','comma')">,</a-button>
            <a-button class="button" :style="bgColor.point2" @click="keyPress('.','point2')">.</a-button>
            <a-button class="button" :style="bgColor.seven" @click="keyPress('7','seven')">7</a-button>
            <a-button class="button" :style="bgColor.eight" @click="keyPress('8','eight')">8</a-button>
            <a-button class="button" :style="bgColor.nine" @click="keyPress('9','eight')">9</a-button>
            <a-button class="button" style="background-color: #4db0e7" @click="handleUserNameOk">OK</a-button>
        </a-row>
        <a-row style="gap:6px;justify-content: center;margin-top: 6px" v-show="!capsLock">
            <a-button class="button" :style="bgColor.z" @click="keyPress('z','z')">z</a-button>
            <a-button class="button" :style="bgColor.x" @click="keyPress('x','x')">x</a-button>
            <a-button class="button" :style="bgColor.c" @click="keyPress('c','c')">c</a-button>
            <a-button class="button" style="width: 124px">
                <img src="../assets/image/space.png" alt="">
            </a-button>
            <a-button class="button" :style="bgColor.v" @click="keyPress('v','v')">v</a-button>
            <a-button class="button" :style="bgColor.b" @click="keyPress('b','b')">b</a-button>
            <a-button class="button" :style="bgColor.n" @click="keyPress('n','n')">n</a-button>
            <a-button class="button" :style="bgColor.m" @click="keyPress('m','m')">m</a-button>
            <a-button class="button" :style="bgColor.comma" @click="keyPress(',','comma')">,</a-button>
            <a-button class="button" :style="bgColor.point2" @click="keyPress('.','point2')">.</a-button>
            <a-button class="button" :style="bgColor.seven" @click="keyPress('7','seven')">7</a-button>
            <a-button class="button" :style="bgColor.eight" @click="keyPress('8','eight')">8</a-button>
            <a-button class="button" :style="bgColor.nine" @click="keyPress('9','eight')">9</a-button>
            <a-button class="button" style="background-color: #4db0e7" @click="handleUserNameOk">OK</a-button>
        </a-row>
    </a-drawer>
    <check-password ref="checkPass"></check-password>
</template>

<script>
import axios from "axios";
import {message} from "ant-design-vue";
import MD5 from "MD5";
import API_BASE_URL from "../../config.js";
import store from "@/store";
import CheckPassword from "@/components/checkPassword.vue";

export default {
    name: "updateUsername",
    components: {CheckPassword},
    props: ['password'],
    data() {
        return {
            UserNameModal: false,
            //主体样式
            body: {
                'background-color': '#305f79'
            },
            openWifi: false,
            bodyStyle: {
                'font-size': '40px',
            },
            bodyStyleModal: [ 'height:90px'],
            //大小写
            capsLock: false,
            userName: '',
            pressBtnBack: ['background-color:#30f8ff', ''],
            bgColor: {
                point1: '',              //--.--小数点
                point2: '',              //--.--小数点
                exclamationSign: '',     //--!--感叹号
                numberSign: '',          //--#--井号
                dollarSign: '',          //--$--美元符号
                percentSign: '',         //--%--百分号
                exponentSign: '',        //--^--乘方符号
                and: '',
                starSign: '',            //--*--星号
                leftBracket: '',         //--(--左括号
                rightBracket: '',        //--)--右括号
                slash: '',               //--/--斜杠
                underline: '',           //--_--下划线
                minus: '',               //-----减号
                equals: '',              //--=--等号
                at: '',                  //--@--
                comma: '',               //--,--逗号
                space: '',               //-- --空格
                Q: '', q: '',
                W: '', w: '',
                R: '', r: '',
                T: '', t: '',
                Y: '', y: '',
                U: '', u: '',
                I: '', i: '',
                O: '', o: '',
                P: '', p: '',
                A: '', a: '',
                S: '', s: '',
                D: '', d: '',
                F: '', f: '',
                G: '', g: '',
                H: '', h: '',
                J: '', j: '',
                K: '', k: '',
                L: '', l: '',
                Z: '', z: '',
                X: '', x: '',
                C: '', c: '',
                V: '', v: '',
                B: '', b: '',
                N: '', n: '',
                M: '', m: '',
                one: '',
                two: '',
                three: '',
                four: '',
                five: '',
                six: '',
                seven: '',
                eight: '',
                nine: '',
                zero: ''
            },
            nameOrPass: false,//true是密码,false是名称
            url: {
                setUserName: `${API_BASE_URL}/set-info`
            }
        }
    },
    methods: {
        handleUserNameOk() {
            //获取输入的用户名
            let name = this.userName;
            //获取已验证过的密码
            let passwd = MD5(this.password);
            axios({
                url: this.url.setUserName,
                method: 'get',
                params: {
                    type: "name",
                    name,
                    passwd,
                }
            }).then((res) => {
                // console.log(res.data.message)
                store.commit('setUsername', {value: this.userName})
                store.commit('setIsRoot',{value:true})
                this.UserNameModal = false
                this.userName = ''
                message.success("用户名修改成功")
                store.commit('setUpdateUsername', {value: false})
            })

        },
        onClose() {
            // eslint-disable-next-line vue/no-mutating-props
            this.UserNameModal = false
            this.userName = ''
            this.$refs.checkPass.open = false
            store.commit('setUpdateUsername', {value: false})
        },
        keyPress(str, val) {
            //设置颜色
            this.bgColor[val] = this.pressBtnBack[0]
            // console.log(str)
            setTimeout(() => {
                this.bgColor[val] = this.pressBtnBack[1]
                // console.log(this.bgColor[val])
            }, 200)
            //设置输入
            this.userName += str;
        },
        backSpace() {
            this.userName = this.userName.slice(0, -1)
        }
    }

}
</script>

<style scoped>
.button {
    width: 59px;
    height: 48px;
    border-radius: 10px;
    border: 2px solid #4db0e7;
    font-weight: 600;
    font-size: 19px;
    background: rgba(0, 0, 0, 0);
    color: white;
}

.button1 {
    width: 59px;
    height: 36px;
    border-radius: 10px;
    border: 2px solid #4db0e7;
    font-weight: 600;
    font-size: 19px;
    background: rgba(0, 0, 0, 0);
    color: white;
    padding: 1px 15px;
}

.confirmBtn{
    height: 40px;
    background: #4db0e7;
    color: white;
    letter-spacing: 7px;
    width: 80px;
    margin-top: 4px;
}

.inputUserCode {
    border-style: hidden;
    width: 355px;
    font-size: 20px;
}

.buttonDiv {
    display: flex;
    justify-content: center;
    gap: 60px;
}
</style>